<template>
	<view class="info">
		<image class="code-img" mode="scaleToFill" :src="imgSrc"></image>
		<view class="content">
			<view class="title">
				预约信息
			</view>
			<view class="detail">
				<view class="detail-item">
					<text class="label">姓名</text>
					<text class="value">{{info.name}}</text>
				</view>
				<view class="detail-item">
					<text class="label">手机号码</text>
					<text class="value">{{info.phone}}</text>
				</view>
				<view class="detail-item">
					<text class="label">预约类型</text>
					<text class="value">{{getAppointmentTypeName(info.status)}}</text>
				</view>
				<view class="detail-item">
					<text class="label">预约时间</text>
					<text class="value">{{formatTime(info.time)}}</text>
				</view>
				<view class="detail-item">
					<text class="label">车辆种类</text>
					<text class="value">{{info.carType.name}}</text>
				</view>
			</view>
		</view>
		<view class="btns">
			<u-button :customStyle="btnStyle" type="primary" @click="handleEdit">修改</u-button>
			<u-button :customStyle="btnStyle" type="primary" @click="handleCancle">取消预约</u-button>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/appointment.js'
	import AppointmentTypeEnum from '@/common/enum/AppointmentType.js'
	export default {
		data() {
			return {
				btnStyle: {
					width: '48%'
				},
				imgSrc: '',
				info: {}
			};
		},
		onLoad(option) {
			const info = JSON.parse(option.info)
			this.info = info
			// 获取小程序码
			this.getCode(info.appointment_id)
			// 获取预约详情
			// this.getAppointmentDetail(id)
		},
		methods: {
			// 获取预约详情
			getAppointmentDetail(appointmentId) {
				Api.detail({
					params: {
						appointmentId
					}
				}).then(res => {
					console.log(res)
					this.info = res.detail
				}).catch(err => {
					uni.showModal({
						title: '请重新进入',
						showCancel: false,
						success: res => {
							if(res.confirm) {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				})
			},
			
			getCode(appointmentId) {
				Api.code({
					appointmentId
				}).then(res => {
					this.imgSrc = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
				})
			},
			
			// 修改预约
			handleEdit() {
				uni.navigateTo({
					url: `/pages/edit/edit?id=${this.info.appointment_id}`
				})
			},
			
			// 取消预约
			handleCancle() {
				uni.showModal({
				    title: '取消预约',
					content: '确定要取消预约吗？',
				    success: res => {
				        if (res.confirm) {
				            Api.cancel({
				            	params: {
				            		appointmentId: this.info.appointment_id
				            	}
				            }).then(res => {
				            	// 取消成功，返回首页
				            	uni.showModal({
				            	    title: '取消成功',
				            		showCancel: false,
				            	    success: res => {
				            	        if (res.confirm) {
				            	            uni.redirectTo({
				            	            	url: '/pages/index/index'
				            	            })
				            	        }
				            	    }
				            	});
				            	
				            }).catch(err => {
								uni.showModal({
								    title: err.message,
									showCancel: false,
								    success: res => {
								        if (res.confirm) {
								            uni.redirectTo({
								            	url: '/pages/index/index'
								            })
								        }
								    }
								});
							})
				        }
				    }
				})
			},
			
			formatTime(datetime) {
				return datetime?.slice(0, 16)
			},
			
			// 获取预约类型
			getAppointmentTypeName(value) {
				if(value) {
					return AppointmentTypeEnum.getNameByValue(value)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.info {
		box-sizing: border-box;
		width: 750rpx;
		padding: 68.34rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.code-img{
			width: 400rpx;
			height: 400rpx;
		}
		
		.content{
			width: 100%;
			
			.title{
				margin-top: 78.85rpx;
				margin-bottom: 73.59rpx;
				color: #333;
				font-family: 'PingFangSC-Medium';
				font-size: 22px;
			}
			
			.detail{
				.detail-item{
					margin-bottom: 56.07rpx;
					.label{
						padding-left: 10rpx;
						display: inline-block;
						width: 250rpx;
						font-size: 15px;
						color: #666;
						font-family: 'PingFangSC-Medium';
					}
					
					.value{
						color: #303133;
						font-size: 22px;
						font-family: 'PingFangSC-Regular';
					}
				}
			}
		}
		
		.btns{
			width: 100%;
			display: flex;
		}
	}
</style>
